;(function (window) {

  const hlRadio = {
    template:`<div class="hl-radio-container">
      <ul>
        <li
          class="item"
          :class="{ 'is-checked':selectedData.indexOf(item.code) > -1 , 'is-inline':checkboxWrapInline }"
          v-for="(item,index) in data"
          @click="handleClick(item,index)"
        >
          <span class="hl-radio-inner"></span>
          <p class="hl-radio-label">{{item.name}}</p>
        </li>
      </ul>
    </div>`,
    data(){
      return {

      }
    },
    model:{
      prop: 'selected',
      event:'on-select-item'
    },
    props:{
      data:{
        type:Array,
        default:() => []
      },
      selected:{
        type:Array,
        default:() => []
      },
      inline: {
        type:Boolean,
        default:true
      }
    },
    computed:{
      selectedData(){
        return this.selected
      },
      checkboxWrapInline(){
        return this.inline
      }
    },
    methods:{
      handleClick(item,index){
        const { code } = item

        console.log(code);
        console.log(this.selectedData);
        const positonIndex = this.selectedData.indexOf(code)

        if(positonIndex == -1){
          if(this.selectedData.length == 0){
            this.selectedData.push(code)
          }else{
            this.selectedData.splice(0,1,code)
          }
        }
        //
        // this.selectedData = [code]

        // 吐出所有选中的数据
        let allSelectedData = []

        for (var i = 0; i < this.data.length; i++) {
          if(this.data[i].code == this.selectedData[0]){
            allSelectedData.push(this.data[i])
          }
        }


        console.log(this.selectedData);
        this.$emit('on-select-item',this.selectedData)
        this.$emit('on-click',allSelectedData,event)
      }

    }
  }

  Vue.component('hl-radio',hlRadio)

} (window))
